<template>
	<div>
		<h4>购物车清单</h4>
		<!-- 操作面板 -->
		<table border="1" width="100%" cellspacing="0">
			<!-- 表头 -->
			<thead>
				<tr>
					<th>
						<label> <input v-model="allChecked" type="checkbox" /> 全选 </label>
					</th>
					<th>商品</th>
					<th>数量</th>
					<th>单价（元）</th>
					<th>金额（元）</th>
					<th>操作</th>
				</tr>
			</thead>
			<!-- 表体 -->
			<tbody class="pand">
				<tr :key="item.id" v-for="(item,index) in tableData">
					<td><input v-model="item.checked" type="checkbox" /></td>
					<td>
						<div class="flex-box">
							<img width="30" :src="item.logo" alt="logo" />
							<p>{{ item.name }}</p>
						</div>
					</td>
					<td>
						<div class="flex-box">
							<button @click="reduce(item)" class="btn-w-20">-</button>
							<input v-model="item.count" class="input-w-30" type="text" />
							<button @click="add(item)" class="btn-w-20">+</button>
						</div>
					</td>
					<td class="tred">{{ item.price | suffix }}</td>
					<td class="tred">{{ (item.price * item.count) | suffix }}</td>
					<td>
						<button @click="del(index)">删除</button>
					</td>
				</tr>
			</tbody>
			<!-- 底部 -->
			<tfoot>
				<tr>
					<td colspan="6">
						<ul class="flex-box space-between">
							<li><button @click="removeSelect">删除所选商品</button></li>
							<li>
								<span class="tred">{{ state.count }}</span>
								件商品总计（不含运费）：
								<span class="tred"> {{ state.totalPrice | suffix }} </span>
								<button>去结算</button>
							</li>
						</ul>
					</td>
				</tr>
			</tfoot>
		</table>
	</div>
</template>

<script>
const ajaxData = [
    { id:1,name:"AJ",count:1,price:1999,logo:require("./img/1.webp")},
    { id:2,name:"厨具",count:1,price:899,logo:require("./img/2.webp")},
    { id:3,name:"口红",count:1,price:4699,logo:require("./img/3.webp")}
]
export default {
	// 过滤器
	filters: {
		suffix(value) {
			// let price = Number(value)
			return `￥ ${Number(value).toFixed(2)}`
		},
	},
	computed: {
		// 是一个全选
		allChecked: {
			get() {
				const checkeds = this.tableData.filter((item) => item.checked)
				return checkeds.length === this.tableData.length
			},
			set(state) {
				this.tableData = this.tableData.map((item) => {
					item.checked = state
					return item
				})
			},
		},
		// 选中条数，总计价格
		state() {
			// 监听tableData数据
			const checkeds = this.tableData.filter((item) => item.checked)

			const totalPrice = checkeds.reduce((a, b) => {
				return a + b.count * b.price
			}, 0)
			return { count: checkeds.length, totalPrice }
		},
	},
	data() {
		return {
			tableData: [],
		}
	},
	mounted() {
		window.fetch('/').then(() => {
			// 得到了接口数据，对数据进行一个处理
			// 给数据每一条加一个checked属性
			this.tableData = ajaxData.map((item) => {
				item.checked = false
				return item
			})
		})
	},
	methods: {
		// 删除被选中的数据
		removeSelect() {
			// 过滤
			this.tableData = this.tableData.filter((item) => {
				if (!item.checked) {
					return item
				}
			})
		},
		// 删除一条购物
		del(index) {
			this.tableData.splice(index, 1)
		},
		// 减少购买
		reduce(data) {
			// 如果值为0的话，让checked为false
			// 如果为0就不可以再减了
			if (data.count > 0) {
				data.count--
			}
			if (data.count === 0) {
				data.checked = false
			}
		},
		// 增加购买
		add(data) {
			// 增加的量不许超过库存数
			if (data.count === 5) {
				this.$message({
					message: '行了，不能再买了',
					type: 'error',
				})
			} else {
				data.count++
			}
		},
	},
}
</script>

<style>
.pand td {
	text-align: center;
}

.flex-box {
	display: flex;
	justify-content: center;
}

.space-between {
	justify-content: space-between;
}

.btn-w-20 {
	width: 20px;
}

.tred {
	color: red;
}

.input-w-30 {
	width: 30px;
}
li{
    list-style: none;
}
</style>
